<template>
  <div class="articleList">

    <!-- 筛选 -->
    <div class="p-10" style="background:#eee;">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            placeholder="请输入文章标题"
            prefix-icon="el-icon-search"
            v-model="selectFrom.title"
            @input="selectArticle"></el-input>
          </el-col>
        <el-col :span="5" class="text-align-center">
          <el-select @change="selectArticle" v-model="selectFrom.type" clearable  placeholder="请选择文章类型">
            <el-option
              v-for="item in articleTypesList"
              :key="item._id"
              :label="item.articleTypeName"
              :value="item._id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5" class="text-align-center">
          <el-select 
            @change="setSelectType" 
            v-model="selectType" 
            clearable
            placeholder="请选择筛选方式"
            multiple
            collapse-tags>
            <el-option
              v-for="item in selectTypes"
              :key="item.label"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="9" class="text-align-center">
          <el-date-picker
            v-model="selectFrom.date"
            @change="selectArticle"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>
      </el-row> 
    </div>
    <!-- 表格 -->
    <el-table :data="articleList" class="WH100">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column label="更新日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span >{{ scope.row.createTime | date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" >
        <template slot-scope="scope">
          <span >{{scope.row.articleTitle}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属类型">
        <template slot-scope="scope">
          <span >{{scope.row.articleType==null?'无':scope.row.articleType.articleTypeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="作者">
        <template slot-scope="scope">
          <span >{{scope.row.articleAuthor}}</span>
        </template>
      </el-table-column>
      <el-table-column label="推荐">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isRecommend"
            @change="setRecommend(scope.row)"
            active-color="#13ce66"
            inactive-color="#fa6706">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="首页显示">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isHome"
            @change="setHome(scope.row)"
            active-color="#13ce66"
            inactive-color="#fa6706">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="内容">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="seeContent(scope.$index,scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editArticle(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteArticle(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="selectFrom.currentPage"
      :page-sizes="pageSizes"
      :page-size="selectFrom.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum" 
      class="flex flex-space-between">
    </el-pagination>
    
    <el-dialog
      :visible.sync="isContent"
      width="60%"
      class="ql-snow">
      <span slot="title">{{article.title}}</span>
      <div class="articleInfo flex p-15">
        <div class="l-h-23">ID: {{article.id}}</div>
        <div class="m-l-30">观看人数 {{article.looknum}}</div>
        <div class="m-l-30">点赞人数 {{article.likenum}}</div>
        <div class="m-l-30">评论人数 {{article.commentNum}}</div>
      </div>
      <div class="ql-editor" v-html="article.content"></div>
      <article-comments :CommentArticleId="article.id" />
    </el-dialog>
  </div>
</template>

<script>
import ArticleComments from '../components/ArticleComments'
export default {
  components: {
    ArticleComments
  },
  data() {
    return {
      articleList: [],
      articleTypesList:[],
      selectTypes: [
        {value: 'likenum', label: '最多点赞', disabled: false},
        {value: 'looknum', label: '最多人看', disabled: false},
        {value: 'isRecommend', label: '特别推荐文章', disabled: false},
        {value: 'isHome', label: '显示首页文章', disabled: false},
      ],
      selectType: [],
      isContent: false,
      article: {
        title: '',
        content: '',
        id: '',
        likenum: '',
        looknum: '',
        commentNum: 0
      },
      pageSizes: [10, 20, 30, 40, 50],
      totalNum: null,
      selectFrom: {
        title: '',
        type: '',
        date: '',
        pageSize: 10,
        currentPage: 1,
        sort: 'createTime',
        isRecommend: '',
        isHome: '',
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    this.getArticleList()
    this.getArticleTypesList()
  },
  methods: {
    async getArticleList() {
      let res = await this.api.post('/admin/article/getArticleList', {
        ...this.selectFrom
      })
      if(res.code == 0) {
        // this.$set(this.articleList, res.data)
        this.$nextTick(() => {
          this.articleList = res.data.articleList
          this.totalNum = res.data.counts
        })
        this.$forceUpdate()
      }else {
        this.$message({type: 'warning', message: res.message })
      }
    },
    async getArticleTypesList() {
      let res = await this.api.get('/admin/article/getArticleTypeList')
      if(res.code == 0){
        this.articleTypesList = res.data

        // 在此处设置一个未分类的id,在文章类型被删除时，被加入到这个分类中
        // 并在后端将被删除文章的articleType改为 这个_id
        this.articleTypesList.push({articleTypeName: '未分类',_id: '5e5264fa2d3723139886ac7d'})
      }else {
        this.$message({ type: 'warning',  message: res.message })
      }
    },
    async setRecommend(info) {  // 设置为推荐
      console.log(info)
      let res = await this.api.post('/admin/article/setArticle', {
        id: info._id,
        data: {
          isRecommend: info.isRecommend
        }
      })
      if(res.code == 0){
        this.$message({ type: 'success',  message: res.message })
        this.getArticleList()
      }else {
        this.$message({ type: 'warning',  message: res.message })
      }
    },
    async setHome(info) {  // 设置为首页文章
      console.log(info)
      let res = await this.api.post('/admin/article/setArticle', {
        id: info._id,
        data: {
          isHome: info.isHome
        }
      })
      if(res.code == 0){
        this.$message({ type: 'success',  message: res.message })
        this.getArticleList()
      }else {
        this.$message({ type: 'warning',  message: res.message })
      }
    },
    deleteArticle(index, item) {
      this.$confirm('此操作将永久删除该文章，确认删除？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(async () => {
         let res = await this.api.get('/admin/article/deleteArticleById', { params: { id: item._id }})
        if(res.code == 0) {
          this.$message({type: 'success', message: res.message})
          this.getArticleList()
        }else {
          this.$message({type: 'warning', message: res.message})
        }
       }).catch(() => {
         this.$message({
           type: 'info',
           message: '已取消删除'
         })        
       })
      
    },
    seeContent(index, item) {  // 查看内容
      this.article.title = item.articleTitle
      this.article.content = item.articleContent
      this.article.id = item._id
      this.article.likenum = item.likenum
      this.article.looknum = item.looknum
      this.article.commentNum = item.commentNum
      this.isContent = true
    },
    editArticle(item)  {
      this.$router.push({path: `/admin/updateArticle/${item._id}`})
    },
    sizeChange(pageSize) {
      this.selectFrom.pageSize = pageSize
      this.getArticleList()
    },
    currentChange(thisPage) {
      this.selectFrom.currentPage = thisPage
      this.getArticleList()
    },
    selectArticle() {
      console.log(this.selectFrom)
      this.getArticleList()
    },
    setSelectType() {
      console.log(this.selectType)
      this.selectFrom.sort = 'createTime'
      this.selectFrom.isRecommend = ''
      this.selectFrom.isHome = ''
      this.selectTypes[0].disabled = false
      this.selectTypes[1].disabled = false

      this.selectType.forEach(e => {
        if(e == 'likenum') {
          this.selectFrom.sort = 'likenum'
          this.selectTypes[1].disabled = true
        }else if(e == 'looknum') {
          this.selectFrom.sort = 'looknum'
          this.selectTypes[0].disabled = true
        }

        if(e == 'isRecommend') this.selectFrom.isRecommend = true

        if(e == 'isHome') this.selectFrom.isHome = true
      })
      this.getArticleList()
      console.log(this.selectFrom)
    }
  }
}
</script>

<style lang="scss">
.articleList {
  .el-dialog__body {
    padding: 0;
  }
  .el-date-editor .el-range-separator {
    width: 6%;
  }
}
</style>